package cn.edu.baiyunu.myapplication.ui.screens.transactions

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import cn.edu.baiyunu.myapplication.ui.components.GradientBackground
import cn.edu.baiyunu.myapplication.ui.components.Toast
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.DeleteTransactionDialog
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.TransactionActions
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.TransactionDetailCard
import cn.edu.baiyunu.myapplication.ui.screens.transactions.components.TransactionDetailHeader
import cn.edu.baiyunu.myapplication.ui.screens.transactions.viewmodel.TransactionDetailViewModel

/**
 * 交易详情屏幕 - 支持沉浸式系统栏
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TransactionDetailScreen(
    transactionId: String,
    onBackClick: () -> Unit,
    navigateToEditTransaction: (String) -> Unit,
    viewModel: TransactionDetailViewModel = hiltViewModel()
) {
    // 初始化视图模型参数
    viewModel.initWithTransactionId(transactionId)
    
    // 获取UI状态
    val uiState by viewModel.uiState.collectAsState()
    
    // 更多操作菜单状态
    var showMoreMenu by remember { mutableStateOf(false) }
    
    // 处理导航
    LaunchedEffect(uiState.navigateBack) {
        if (uiState.navigateBack) {
            onBackClick()
            viewModel.resetNavigation()
        }
    }
    
    // 删除确认对话框
    if (uiState.showDeleteDialog) {
        DeleteTransactionDialog(
            onDismiss = { viewModel.dismissDeleteDialog() },
            onConfirm = { viewModel.deleteTransaction() }
        )
    }
    
    // Toast消息
    if (uiState.toastMessage.isNotEmpty()) {
        Toast(message = uiState.toastMessage)
    }
    
    GradientBackground {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { 
                        Text(
                            "交易详情", 
                            color = Color.White,
                            fontWeight = FontWeight.Bold,
                            fontSize = 18.sp
                        ) 
                    },
                    navigationIcon = {
                        IconButton(onClick = onBackClick) {
                            Icon(
                                imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                                contentDescription = "返回",
                                tint = Color.White
                            )
                        }
                    },
                    actions = {
                        // 更多操作按钮
                        IconButton(onClick = { showMoreMenu = true }) {
                            Icon(
                                imageVector = Icons.Default.MoreVert,
                                contentDescription = "更多操作",
                                tint = Color.White
                            )
                        }
                        
                        // 下拉菜单
                        DropdownMenu(
                            expanded = showMoreMenu,
                            onDismissRequest = { showMoreMenu = false }
                        ) {
                            DropdownMenuItem(
                                text = { Text("编辑") },
                                onClick = {
                                    showMoreMenu = false
                                    uiState.transaction?.let { 
                                        navigateToEditTransaction(it.id)
                                    }
                                }
                            )
                            
                            DropdownMenuItem(
                                text = { Text("删除") },
                                onClick = {
                                    showMoreMenu = false
                                    viewModel.showDeleteConfirmation()
                                }
                            )
                        }
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = Color.Transparent,
                        titleContentColor = Color.White,
                        navigationIconContentColor = Color.White,
                        actionIconContentColor = Color.White
                    ),
                    modifier = Modifier.statusBarsPadding() // 添加状态栏内边距
                )
            },
            containerColor = Color.Transparent // 确保Scaffold背景透明，让渐变背景可见
        ) { paddingValues ->
            if (uiState.isLoading) {
                // 加载中状态
                Text(
                    "加载中...",
                    color = Color.White,
                    modifier = Modifier
                        .padding(paddingValues)
                        .padding(20.dp)
                )
            } else if (uiState.error != null) {
                // 错误状态
                Text(
                    uiState.error ?: "未知错误",
                    color = Color.White,
                    modifier = Modifier
                        .padding(paddingValues)
                        .padding(20.dp)
                )
            } else {
                // 正常显示交易详情
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(paddingValues)
                        .padding(horizontal = 20.dp, vertical = 10.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    // 交易金额和类型
                    uiState.transaction?.let { transaction ->
                        TransactionDetailHeader(
                            amount = transaction.amount,
                            isExpense = transaction.type == "expense"
                        )
                    }
                    
                    Spacer(modifier = Modifier.height(30.dp))
                    
                    // 交易详情卡片
                    uiState.transaction?.let { transaction ->
                        TransactionDetailCard(
                            category = uiState.category,
                            date = transaction.date,
                            note = transaction.note,
                            createdAt = transaction.createdAt
                        )
                        
                        Spacer(modifier = Modifier.height(20.dp))
                        
                        // 操作按钮
                        TransactionActions(
                            onEditClick = { 
                                navigateToEditTransaction(transaction.id)
                            },
                            onDeleteClick = {
                                viewModel.showDeleteConfirmation()
                            }
                        )
                    }
                }
            }
        }
    }
} 